<template>
  <div class="music-list">
    <title-bar :title="title"></title-bar>
    <div class="bg-image-wrap" ref="bgImage">
      <div class="bg-image" :style="bgStyle"></div>
      <div class="filter" ref="filter"></div>
      <div class="doc-wrapper" ref="playwrapper">
        <div class="songsheet-detail w700">
          <div class="cover-img" v-lazy:background-image="bgImage">
            <p class="desc">
              <i class="iconfont iconsanjiaoxing"></i>
              <span>{{PlayCount | playNumFormat}}</span>
            </p>
          </div>
          <div class="detail-desc-box">
            <h6>{{songsheetName}}</h6>
            <div class="author">
              <div class="author-avator" v-lazy:background-image="creator.avatarUrl"></div>
              <div class="author-name">{{creator.nickname}}</div>
              <i class="iconfont iconarrnormal"></i>
            </div>
            <div class="sheet-desc-bottom" @click.stop="handleMoreinfo()" v-if="description">
              <div class="sheet-desc">{{description}}</div>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
        </div>
        <tool-bar
          :commentCount="this.songsheetInfo.commentCount"
          :shareCount="this.songsheetInfo.shareCount"
          @gocomment="handleToComment"
          @godetail="handleMoreinfo()"
        ></tool-bar>
      </div>
    </div>
    <div class="bg-layer" ref="layer"></div>
    <div class="scroll-wrap" ref="listWrap">
      <scroll
        :data="songs"
        class="list"
        :listen-scroll="listenScroll"
        :probe-type="probeType"
        ref="list"
        @scroll="scroll"
      >
        <div class="song-list-wrapper">
          <song-list
            :songs="songs"
            @select="selectItem"
            @playAll="playAllMusic"
            :subscribedCount="this.songsheetInfo.subscribedCount"
            :rank="rank"
          ></song-list>
        </div>
      </scroll>
    </div>

    <more-info
      :info="songsheetInfo"
      class="more-info-cp"
      v-show="moreInfo"
      @handleClose="closeMoreInfo"
      :isShow="moreInfo"
    ></more-info>
  </div>
</template>

<script>
import Scroll from "@/base/scroll/scroll";
import SongList from "@/base/song-list/song-list";
import ToolBar from "@/base/tool-bar/tool-bar";
import TitleBar from "@/base/title-bar/title-bar";
import MoreInfo from "@/components/more-info/more-info";
import { prefixStyle } from "@/utils/dom";
import { mapActions } from "vuex";
const Rev_HEIGHT = 40;
const transform = prefixStyle("transform");
const backdrop = prefixStyle("backdrop-filter");
import { playListMixin } from "@/common/mixin.js";
export default {
  mixins: [playListMixin],
  props: {
    bgImage: {
      type: String,
      default: ""
    },
    songs: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: ""
    },
    PlayCount: {
      type: Number,
      default: 0
    },
    creator: {
      type: Object,
      default: {}
    },
    description: {
      type: String,
      default: ""
    },
    songsheetName: {
      type: String,
      default: ""
    },
    // 全部数据- -
    songsheetInfo: {
      type: Object,
      default: {}
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scrollY: 0,
      moreInfo: false
    };
  },
  components: {
    Scroll,
    SongList,
    ToolBar,
    TitleBar,
    MoreInfo
  },
  computed: {
    bgStyle() {
      return `background-image:url(${this.bgImage})`;
    }
  },

  created() {
    this.probeType = 3;
    this.listenScroll = true;
  },
  mounted() {
    this.imageHeight = this.$refs.bgImage.clientHeight;
    this.minTranslateY = -this.imageHeight + Rev_HEIGHT;
    this.$refs.listWrap.style.top = `${this.imageHeight}px`;
  },
  methods: {
    handleMoreinfo() {
      this.moreInfo = true;
    },
    closeMoreInfo() {
      this.moreInfo = false;
    },
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.listWrap.style.bottom = bottom;
      this.$refs.list.refresh();
    },
    routerback() {
      this.$router.back();
    },
    scroll(pos) {
      this.scrollY = pos.y;
    },
    selectItem(item, index) {
      this.selectPlay({
        list: this.songs,
        index: index
      });
    },
    playAllMusic(mode) {
      if (mode == "random") {
        this.randomPlay({
          list: this.songs
        });
      }
    },
    handleToComment() {
      this.$router.push({
        name: "comments",
        query: {
          info: this.songsheetInfo
        }
      });
    },
    ...mapActions(["selectPlay", "randomPlay"])
  },
  watch: {
    scrollY(newY) {
      let translateY = Math.max(this.minTranslateY, newY);
      let zIndex = 0;
      let scale = 1;
      let blur = 0;
      // 往下拉监听图片放大
      // 获取比例(比例为往下拉的距离除以图片高度)：
      const percent = Math.abs(newY / this.imageHeight);
      if (newY > 0) {
        zIndex = 10;
        scale = 1 + percent;
        this.$refs.bgImage.style[transform] = `scale(${scale})`;
        // this.$refs.bgImage.style["Transform"] = `scale(${scale})`;
        // this.$refs.bgImage.style["webkitTransform"] = `scale(${scale})`;
      } else {
        // 往上拉图片慢慢模糊
        blur = Math.min(20 * percent, 20);
      }
      this.$refs.filter.style[backdrop] = `blur(${blur}px)`;
      // 上拉扩展列表高度
      this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`;
      if (newY < this.minTranslateY) {
        zIndex = 10;
        this.$refs.bgImage.style.paddingTop = 0;
        this.$refs.bgImage.style.height = `${Rev_HEIGHT}px`;
        this.$refs.playwrapper.style.display = "none";
      } else {
        this.$refs.bgImage.style.paddingTop = "70%";
        this.$refs.bgImage.style.height = 0;
        this.$refs.playwrapper.style.display = "block";
      }
      // 设置人物照片层级
      this.$refs.bgImage.style.zIndex = zIndex;
    }
  }
};
</script>

<style lang="less" scoped>
.music-list {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: @color-background;
  .bg-layer {
    position: relative;
    height: 100%;
    background: #222;
  }
  .scroll-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;

    background: #222;
  }
  .list {
    height: 100%;

    position: relative;
  }
  .back {
    position: absolute;
    top: 0;
    left: 6px;
    z-index: 50;
    .iconfanhui {
      display: block;
      padding: 10px;
      font-size: @font-size-large-x;
      color: @color-theme;
      font-size: 24px;
    }
  }
  .title {
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 40;
    width: 80%;
    .sl;
    text-align: center;
    line-height: 40px;
    font-size: @font-size-large;
    color: @color-text;
  }
  .bg-image-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 70%;
    transform-origin: top;
    background-size: cover;
    overflow: hidden;
    .bg-image {
      .posfull;
      -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
    }
    .doc-wrapper {
      position: absolute;
      // bottom: 20px;
      z-index: 50;
      width: 100%;
      height: calc(~"100% - 40px");
      left: 0;
      top: 40px;
      color: #fff;
    }
    .filter {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(7, 17, 27, 0.4);
    }
  }
  .bg-layer {
    position: relative;
    height: 100%;
    background: @color-background;
  }
  .list {
    .song-list-wrapper {
      padding: 0;
    }
    // .loading-container {
    //   position: absolute;
    //   width: 100%;
    //   top: 50%;
    //   transform: translateY(-50%);
    // }
  }
}

.songsheet-detail {
  .flex-row-nowrap;
  margin-top: 0.6rem;
  .cover-img {
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 3.4rem;
    border-radius: 6px;
    background-color: #fff;
    .bz(cover);
    position: relative;
    .desc {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 12px;
      .flex-row-nowrap(center);
      i {
        font-weight: bold;
        font-size: 12px;
      }
      span {
        margin-left: 5px;
      }
    }
  }
  .detail-desc-box {
    flex: 1;
    width: 100%;
    padding-left: 0.4533rem;
    h6 {
      font-size: 0.4rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .author {
      margin-top: 0.24rem;
      .flex-row-nowrap(center);

      .author-avator {
        width: 0.72rem;
        height: 0.72rem;
        border-radius: 50%;
        .bz(cover);
      }
      .author-name {
        font-size: 0.2933rem;
        margin: 0 5px;
        .sl;
      }
      i {
        font-size: 0.2933rem;
      }
    }
    .sheet-desc-bottom {
      margin-top: 0.24rem;
      .flex-row-nowrap(center);
      .sheet-desc {
        font-size: 12px;
        line-height: 1.8;
        // height: 48px;
        overflow: hidden;
        color: #eee;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      i {
        font-size: 12px;
        color: #eee;
      }
    }
  }
}
</style>